<template>
    <div class="home">
     <div class="home-top">
        <span class="title">收藏夹</span>&nbsp;&nbsp;&nbsp;<span style="font-size:10px">双击卡片为删除哦！！</span>&nbsp;&nbsp;&nbsp;<span style="font-size: 10px">写多个标签的格式：xx-xx-xx</span>
     </div>
     <div ref="element" class="connent-main">
      <div class="lovecard" v-for=" n in loveData">
        <el-card @dblclick="dellove(n)">
          <template #header>
            <div class="card-header">
              <el-link :href="n.url" target="_blank" type="primary">{{ n.name }}</el-link>
            </div>
          </template>
          <div class="teacher" style="margin-top: 10px;"><el-button  v-for="teacher in (n.teacher ? n.teacher.split('-'):[])" type="primary"
              size="small" color="#009688">{{ teacher}}</el-button></div>
        </el-card>
      </div>
      <div class="lovecard">
         <el-card @click="dialogVisible = true" class="add">
           <el-icon size="80px" color="#d5d5e5" ><Plus /></el-icon>
         </el-card>
      </div>
     </div>
     <el-dialog
       v-model="dialogVisible"
       title="添加喜爱网站"
       width="320px"
       center
  >
 <div class="dias"><span>网站标题:&nbsp;&nbsp;</span><input type="text" v-model="name" ></div>
 <div class="dias"><span>网站地址:&nbsp;&nbsp;</span><input type="text" v-model="url" > </div>
 <div class="dias"><span>网站标签:&nbsp;&nbsp;</span><input type="text" v-model="teacher"> </div>  
 <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="lovesummit()">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup lang="ts" name="Love">
  import { ElMessage } from 'element-plus'
  import { ref,onMounted} from 'vue'


  const dialogVisible = ref(false)
     let loveData:any = ref([
        {name:'bilibibi大学',url:'https://www.bilibili.com',teacher:'陈睿'}
     ])
  const name = ref()
  const url = ref()
  const teacher = ref()
   function mes(){
    ElMessage({message: '选项不能为0哦！！！',type: 'warning',})
   }
   function lovesummit(){
           if(!name.value) mes() 
             else if(!url.value) mes()
                  else if(!teacher.value) mes()
                  else {     loveData.value.push({name:name.value,url:url.value,teacher:teacher.value  })
                             name.value=''
                             url.value=''
                             teacher.value=''
                             localStorage.setItem('loveDate',JSON.stringify(loveData.value))
                        }
        
   }
   function dellove(n:any){
       loveData.value= loveData.value.filter((item:any) => item.name != n.name )
       localStorage.setItem('loveDate',JSON.stringify(loveData.value))
   }
   function loveview(){
    const v = localStorage.getItem('loveDate')
    console.log(v)
     if (v) {
     
      loveData.value =  JSON.parse(v)
     }
       
      
   }
   onMounted(()=>{
       loveview()
   })
</script>

<style scoped>
    .title {
  font-size: 22px
}

.connent-main {
  margin-top: 20px;
  height: 85%;
  display: flex;
  flex-wrap: wrap;
}
.el-link {
  font-size: 20px;
}

 .teacher {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
}
 .add{
   height: 100%;
 }
 .dias{
    font-size: 16px;
    margin-top:10px
 }
 .lovecard{
    margin-left:10px
 }

</style>